window.addEventListener('DOMContentLoaded', function() {
	inputInit();
	controlInit();
	controlsMenu = document.getElementById('controls_menu');
	var delControl = document.getElementById('del_control');
	delControl.addEventListener('click',deleteContainer,false);
	var submitbutton = document.getElementById('submitbutton');
	submitbutton.onclick = submitChanges;
}, false);

function submitChanges() {
	xmlhttp = new XMLHttpRequest();
	var submitdata = document.getElementById('submitdata');
	var postparam = submitdata.innerHTML;
	xmlhttp.open('POST', 'test.php', true);
	xmlhttp.setRequestHeader("Content-Type", "text/xml");
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4) {
			if(xmlhttp.status == 200) {
				alert(xmlhttp.responseText);
				submitdata.innerHTML = xmlhttp.responseText;
				inputInit();
				controlInit();
			}
		}
	};
	xmlhttp.send(postparam);
}

function inputInit() {
    var inputs = document.getElementsByClassName('textinput');
    for (var i=0; i<inputs.length; i++) { 
        var input = inputs[i];
		resize.call(input);
		input.onkeyup = inputChange;
    }
}

function resize() {
	var value_length = this.value.length;
	if (value_length==0) value_length = 1;
	this.setAttribute('size', value_length);
}

function controlInit() {
	var containers = document.getElementsByClassName('container');
	for (var i=0; i<containers.length; i++) {
		var container = containers[i];
		container.addEventListener('mouseover', showControls, false);
		container.addEventListener('mouseout', hideControls, false);
	}	
}

function inputChange() {
	resize.call(this);
	this.setAttribute('value',this.value);
}

function eventStop() {
	if (!e) var e = event || window.event;
	e.stopPropagation ? e.stopPropagation() : (e.cancelBubble=true);
}

function showControls() {
	if (this.lastChild.className!='controls') {
		this.appendChild(controlsMenu);
		controlsMenu.style.display = 'block';
		//var controlsDiv = document.createElement('div');
		//controlsDiv.className = 'controls';
		//var deleteCtrl = document.createElement('span');
		//deleteCtrl.className = 'delete';
		//deleteCtrl.id = 'delete-'+this.id;
		//deleteCtrl.innerHTML = 'DEL';
		//controlsDiv.appendChild(deleteCtrl);
		//this.appendChild(controlsDiv);
	}
	this.style.borderTopColor = '#ccf';
	this.style.borderBottomColor = '#ccf';
	eventStop();
}

function hideControls() {
	if (this.lastChild.className=='controls') {
		//this.lastChild.style.display='none';
		//this.removeChild(this.lastChild);
	}
	this.style.borderTopColor = 'hsla(0,0%,100%,0)';
	this.style.borderBottomColor = 'hsla(0,0%,100%,0)';
	eventStop();
}

function deleteContainer() {
	//alert(this.parentNode.parentNode.id);
	var parentContainer = this.parentNode.parentNode;
	if (!parentContainer.deleted) {
		deleteControlsTrue.call(parentContainer);
	} else {
		deleteControlsFalse.call(parentContainer);
		deleteControlsFalseParent.call(parentContainer.parentNode);
	}
}

function deleteControlsTrue() {
	this.style.backgroundColor = 'lightgray';
	this.style.borderColor = 'lightgray';
	//var containerDeleteControl = document.getElementById('del_control');
	//containerDeleteControl.style.color = 'black';
	//containerDeleteControl.style.backgroundColor = 'rosybrown';
	this.deleted = true;
	//inputDelete.call(this);
	var containerChilds = this.getElementsByClassName('container');
	for (var i=0; i<containerChilds.length; i++) {
		var containerChild = containerChilds[i];
		deleteControlsTrue.call(containerChild);
	}
}

function deleteControlsFalse() {
	this.style.backgroundColor = 'hsla(0,0%,100%,0)';
	this.style.borderColor = 'hsla(0,0%,100%,0)';
	this.style.borderLeftColor = '#ccf';
	//var containerDeleteControl = document.getElementById('del_control');
	//containerDeleteControl.style.color = 'white';
	//containerDeleteControl.style.backgroundColor = 'red';
	this.deleted = false;
	//inputDeleteCancel.call(this);
	var containerChilds = this.getElementsByClassName('container');
	for (var i=0; i<containerChilds.length; i++) {
		var containerChild = containerChilds[i];
		containerChild.style.backgroundColor = 'hsla(0,0%,100%,0)';
		containerChild.style.borderColor = 'hsla(0,0%,100%,0)';
		containerChild.style.borderLeftColor = '#ccf';
		//var containerDeleteControl = document.getElementById('del_control');
		//containerDeleteControl.style.color = 'white';
		//containerDeleteControl.style.backgroundColor = 'red';
		containerChild.deleted = false;
		//inputDeleteCancel.call(containerChild);
		//deleteControlsFalse.call(containerChild);
	}
}

function deleteControlsFalseParent() {
	if (this.deleted) {
		this.style.backgroundColor = 'hsla(0,0%,100%,0)';
		this.style.borderColor = 'hsla(0,0%,100%,0)';
		this.style.borderLeftColor = '#ccf';
		//var containerDeleteControl = document.getElementById('del_control');
		//containerDeleteControl.style.color = 'white';
		//containerDeleteControl.style.backgroundColor = 'red';
		this.deleted = false;
		//inputDeleteCancel.call(this);
		deleteControlsFalseParent.call(this.parentNode);
	}
}
